<template>
  <div class="goods-param">
    <table class="sizes" v-if="goodsParam.sizes">
      <tr v-for="item in goodsParam.sizes[0]">
        <th>{{item[0]}}</th>
        <td v-for="i in item.length-1">{{item[i]}}</td>
      </tr>
    </table>

    <table class="infos">
      <tr v-for="item in goodsParam.infos">
        <th>{{item.key}}</th>
        <td>{{item.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "DetailGoodsParam",
    props: {
      goodsParam: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .goods-param {
    font-size: 15px;
    background-color: var(--color-background);
  }

  table {
    width: 100%;
  }

  tr {
    border-bottom: 1px solid #f2f5f8;
    padding: 10px 0px 10px 0px;
    margin: 0px 10px 0px 10px;

    display: flex;
  }

  th {
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
    width: 20%;
  }

  td {
    flex: 1;
  }

  .sizes tr:last-child {
    border-bottom: 3px solid #f2f5f8;
  }

  .infos td {
    flex: 1;
    align-self: baseline;
    text-align: left;
    color: var(--color-high-text);
  }

  .infos tr:last-child {
    margin: 10px 0px 0px 0px;
    padding: 0px 15px 20px 15px;
    border-bottom: 5px solid #f2f5f8;
  }
</style>